Day_18 使用Razor Pages建立動態頁面

2024 iThome 鐵人賽

DAY 18

Modern Web

ASP.NET Core的終極奧義：從零到無敵系列第 18 篇

16th鐵人賽

clevens1008

團隊NUTC imac

2024-09-26 00:40:13

196 瀏覽

分享至

第四章：前端整合篇

Razor Pages是ASP.NET Core中的一個強大功能，它提供了簡單且有效的方式來構建動態網頁。透過Razor Pages，我們可以快速創建高效且可維護的頁面結構。本篇將介紹如何使用Razor Pages來建立動態網頁，並探討其優勢。

1. Razor Pages的概念

Razor Pages是ASP.NET Core 2.0開始引入的一種頁面驅動的編程模型，專為簡化小型應用和專案的開發過程設計。與傳統的MVC架構相比，Razor Pages將頁面邏輯和UI結合在一起，使開發者能夠更快速地編寫代碼和處理表單提交等動作。

Razor Pages的每個頁面都有一個.cshtml文件（包含HTML和C#的Razor語法）和一個與之相關的PageModel類（處理頁面邏輯）。

2. 建立一個新的Razor Page

要在ASP.NET Core專案中新增Razor Page，我們首先需要右鍵點擊專案中的Pages資料夾，選擇新增一個「Razor Page」項目。

當我們新增一個Razor Page時，會自動生成以下兩個文件：

.cshtml 文件：包含HTML和Razor語法
.cshtml.cs 文件：PageModel類，負責頁面的後端邏輯

一個簡單的Razor Page範例如下：

@page
@model IndexModel
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Welcome to Razor Pages</title>
</head>
<body>
    <h1>@Model.Message</h1>
</body>
</html>

這裡的 @page 指令標誌著這是一個Razor Page，而 @Model.Message 用於在頁面上顯示從PageModel中傳遞的數據。

3. Razor Pages的PageModel

每個Razor Page都會有對應的PageModel類，它負責處理頁面的邏輯。這個PageModel類包含在.cshtml.cs文件中，負責管理頁面的數據和行為。

範例PageModel類：

public class IndexModel : PageModel
{
    public string Message { get; set; }

    public void OnGet()
    {
        Message = "Hello, welcome to Razor Pages!";
    }
}

在這個範例中，OnGet方法會在頁面被請求時執行，並將一個訊息賦值給 Message 屬性。這個訊息接著會在對應的 .cshtml 頁面上被渲染。

4. 使用表單和處理提交

Razor Pages使得處理表單提交變得非常簡單。當用戶提交表單時，PageModel中的OnPost方法會自動被觸發，這樣我們就可以輕鬆地處理來自用戶的輸入。

範例表單：

@page
@model ContactModel
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Contact Us</title>
</head>
<body>
    <form method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="Name" />
        <button type="submit">Submit</button>
    </form>
</body>
</html>

對應的PageModel處理邏輯：

public class ContactModel : PageModel
{
    [BindProperty]
    public string Name { get; set; }

    public void OnPost()
    {
        // 在這裡處理表單提交邏輯
        if (!string.IsNullOrEmpty(Name))
        {
            // 處理輸入的數據
        }
    }
}

在這個範例中，當用戶提交表單時，OnPost方法會被觸發，並且表單中的Name欄位會自動綁定到PageModel中的Name屬性。

5. Razor Pages的優勢

Razor Pages有以下幾個顯著的優勢：

簡化代碼結構：與傳統的MVC模式相比，Razor Pages將頁面邏輯和顯示緊密結合在一起，這對於小型應用來說可以減少代碼的複雜性。
便於維護：每個頁面都自包含其對應的PageModel，這樣可以讓開發者更清楚地掌控頁面的邏輯與視圖。
高效的表單處理：Razor Pages簡化了表單提交與數據處理的流程，特別適合於簡單的表單操作，如資料輸入或提交。
更快的開發速度：由於其直觀的結構和設計，Razor Pages適合於快速開發，減少了多餘的配置和代碼分離。
6. 小結

Razor Pages為ASP.NET Core開發提供了一個簡單且功能強大的解決方案，特別是在構建動態網頁應用時，能夠顯著提升開發效率。無論是處理表單還是進行頁面邏輯處理，Razor Pages都提供了靈活且易用的方式來應對各種需求。